<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>用户账号信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"  href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" href="css/footer.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/account-information.css}" href="css/account-information.css" />
    <link rel="stylesheet" th:href="@{/administration/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/administration/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
</head>

<body>
<div th:replace="head::topbar"></div>
<div class="account-bg">
    <div class="container clearfix">
        <div class="account-tit">
            <a href="/customer/person_center">首页</a>
            <span class="icon-righthollo"></span>
            <span>账号信息</span>
        </div>
        <div id="personal-left"></div>
        <div class="account-rightlist fl">
            <ul class="rightlist-title clearfix">
                <li class="title-item fl active">基本资料</li>
                <li class="title-item fl">感兴趣的分类</li>
                <li class="title-item fl">我的尺码</li>
            </ul>
            <ul class="rightlist-content">
                <li class="basic-information">
                    <div class="userinfor">
                        <div class="userinfor-item clearfix">
                            <label for="" class="userlabel fl">用户头像</label>
                            <div class="usercontent fl">
                                <div class="useravator relative">
                                    <img th:src="@{/img/personal-headportrait.jpg}" />
                                    <div class="icon-pic absolute"></div>
                                    <div class="icon-mask absolute"></div>
                                </div>
                            </div>
                        </div>
                        <div class="userinfor-item clearfix">
                            <label for="" class="userlabel fl">用户ID</label>
                            <div class="usercontent fl" th:text="${customer.getCustomerId()}">回显ID信息</div>
                        </div>
<!--                        <div class="userinfor-item clearfix">-->
<!--                            <label for="" class="userlabel fl">帐　　号</label>-->
<!--                            <div class="usercontent fl">回显信息</div>-->
<!--                        </div>-->
                        <div class="userinfor-item clearfix">
                            <label for="" class="userlabel fl">昵　　称</label>
                            <div class="usercontent fl" th:text="${customer.getCustomerNickname()}">桨声灯影里</div>
                        </div>
                        <div class="userinfor-item clearfix">
                            <label for="" class="userlabel fl">手机号</label>
                            <div class="usercontent fl" th:text="${customer.getCustomerPhone()}">桨声灯影里</div>
                        </div>
                        <div class="userinfor-item clearfix xiongdi" >
                            <label for="" class="userlabel fl">地址</label>
                            <div class="usercontent fl clearfix" th:id="qqq">
<!--                                隐藏域  地址ID-->
                                <!--<input id="edit_address_id" type="hidden" name="addressId" th:value="${address.getAddressId()}"/>-->
                                <!--<input id="addressValue" class="nicheng" type="text" style="width:400px;;border-color: #8e846b;border-radius: 5px" name="address" th:value="${address.getAddress()}" placeholder=" 地址 " />-->
                                <!--<button id="eidt_address_btn" style="margin-left: 10px;background-color:#b4a078;border: 1px solid #b4a078"  class="btn btn-primary">修改</button>-->
                                <ul class="woxiede" th:value="123">
                                    <li th:each="address:${address}" th:id="${address.getAddressId()} "class="liclass"><input id="edit_address_id" type="hidden" name="addressId" th:value="${address.getAddressId()}"/><input id="addressValue" class="nicheng" type="text" style="width:400px;;border-color: #8e846b;border-radius: 5px" name="address" th:value="${address.getAddress()}" placeholder=" 地址 " /><button id="eidt_address_btn" style="margin-left: 10px;background-color:#b4a078;border: 1px solid #b4a078"  class="btn btn-primary ">修改</button><div style="position: absolute;display: inline" ><button style="margin-left: 10px;background-color:#b4a078;border: 1px solid #b4a078" class="btn btn-primary ">删除</button></div></li>
                                </ul>
                            </div>
                        </div>
                        <div class="userinfor-item clearfix">
                            <label for="" class="userlabel fl">新增地址</label>
<!--                            用户ID-->
                            <input id="customerId" type="hidden" name="customerId" th:value="${customer.getCustomerId()}"/>
                            <span id="addBtn" style="margin-left:30px;color:#3f729b;cursor: pointer; font-size: 30px;width: 30px;height: 30px;line-height: 30px">+</span>
                            <span id="add_alt" style="display: none">点击新增地址</span>
                            <div class="usercontent fl">
                                <input id="new_address_value" style="width:400px;border-color: #8e846b;border-radius: 5px" class="nicheng"  type="text"  name="address"   value="" placeholder=" 此处新增地址 " />
                            </div>
                        </div>
                        <div class="solitline"></div>
                    </div>
                </li>
                <li class="intrested">
                    <div class="intrestedbox">
                        <div class="intrestedtip">多选几个，小选会推荐地更精准哦！</div>
                        <div class="whatintrested clearfix">
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img1.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">床品被枕</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img2.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">餐厨用品</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img3.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">居家神器</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img4.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">家具家饰</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img5.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">鞋靴外搭</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img6.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">内衣裤袜</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img7.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">箱包差旅</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img8.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">洗护用品</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img9.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">办公文具</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img10.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">茶点零食</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img11.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">宠物用品</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img12.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">运动音乐</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img13.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">母婴用品</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img14.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">车载用品</span>
                                </div>
                            </div>
                            <div class="intrested-item fl">
                                <div class="item-cover relative">
                                    <img th:src="@{/img/interested-img15.png}" alt="" />
                                    <div class="intrestedzezhao absolute">
                                        <img th:src="@{/img/interested-duigou.png}" alt="" />
                                    </div>
                                </div>
                                <div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
                                    <span style="margin-left: 10px;">智能硬件</span>
                                </div>
                            </div>
                        </div>
                        <div class="btnbox relative">
                            <button type="button" class="subbtn">提交</button>
                            <div class="btnmsg absolute">提交成功！</div>
                        </div>
                    </div>
                </li>
                <li class="my-size">
                    <div class="sizebox">
                        <div class="size-head clearfix">
                            <span class="fl">最多可创建10个角色</span>
                            <button class="xinjian fr" type="button">新建</button>
                        </div>
                        <div class="size-body">
                            <table border="0" cellspacing="" cellpadding="">
                                <thead>
                                <tr>
                                    <th style="width: 93px;">角色</th>
                                    <th>身高cm</th>
                                    <th>体重kg</th>
                                    <th>肩宽cm</th>
                                    <th>胸围cm</th>
                                    <th>腰围cm</th>
                                    <th>臀围cm</th>
                                    <th>脚长cm</th>
                                    <th>脚围cm</th>
                                    <th style="width: 60px;"></th>
                                    <th style="width: 105px;"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td style="width: 93px;">我的尺码</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                    <td style="width: 60px;"></td>
                                    <td style="width: 105px;">
                                        <p class="editbox">修改</p>
                                        <p class="delbox">删除</p>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="chimabox absolute relative">

    <div class="chimalist">
        <div class="guanbi absolute"></div>
        <div class="chimalist-tit">新建尺码</div>
        <div class="chimalist-content clearfix">
            <div class="imgWarp fl">
                <div class="imgDesc">测量参考</div>
                <img th:src="@{/img/chima.png}" alt="" />
            </div>
            <div class="formWarp fl">
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">角色名称</div>
                    <div class="inputWarp">
                        <input type="text" name="rolename" id="rolname" maxlength="5" value="我的尺码" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">身高(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="height" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">体重(kg)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="weight" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">肩宽(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="shoulderbreadth" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">胸围(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="bust" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">腰围(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="waistcircumference" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">臀围(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="hipcircumference" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">脚长(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="footlength" maxlength="5" value="" />
                    </div>
                </div>
                <div class="m-sizeitem clearfix">
                    <div class="m-sizelabel fl">脚围(cm)</div>
                    <div class="inputWarp">
                        <input type="text" name="" id="footcircumference" maxlength="5" value="" />
                    </div>
                </div>
                <span class="formDesc">信息越完整，对您选择服饰时越有帮助</span>
                <div class="size-check">
                    <input class="radio" type="radio" name="dft" id="" value="设为默认" />
                    <span>设为默认</span>
                </div>
                <div class="size-buttonbox clearfix">
                    <p class="baocun fl">保存</p>
                    <!--<p class="save fl">保存</p>-->
                    <p class="quxiao fl">取消</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer::#footbar"></div>
<script th:src="@{/layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        //底部侧边栏关闭
        $(".icon-sidebarx").click(function() {
            $(this).parents(".sidebar-b-bac").remove();
        });
        //右边侧边栏关闭
        $(".icon-subx").click(function() {
            $(this).parents(".sub-list").css("display", "none");
        });
        //右边hover弹窗input隐藏出现
        $(".sub-inputbox").click(function() {
            $(this).prev(".icon-inputx").css("opacity", 1);
        });
        //下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if(top > 200) {
                $(".sidebar-r-totop").css({
                    display: 'block'
                });
                $(".navigation-fix").slideDown();
            } else {
                $(".sidebar-r-totop").css({
                    display: 'none'
                });
                $(".navigation-fix").slideUp();
            }
        });
        //点击回到顶部，回到顶部
        $(".sidebar-r-totop").click(function() {
            $("html,body").animate({
                scrollTop: 0
            }, 500);
        });

    })
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#a-i").addClass("active");
        $(".title-item").click(function() {
            var i = $(this).index();
            console.log(i);
            $(".title-item").removeClass("active");
            $(this).addClass("active");
            $(".rightlist-content li").css("display", "none");
            $(this).parent().siblings(".rightlist-content").children().eq(i).css("display", "block")
        });
        var flag = true;
        $(".intrested-item").click(function() {

            if(flag) {
                $(this).find(".intrestedzezhao").css("display", "block");
                $(this).find("input:checkbox").prop("checked", "checked");
                flag = false;
            } else {
                $(this).find(".intrestedzezhao").css("display", "none");
                $(this).find("input:checkbox").prop("checked", false);
                flag = true;
            }
        });
        $(".subbtn").click(function() {
            $(this).siblings(".btnmsg").fadeIn(2000, function() {
                $(".btnmsg").animate({
                    opacity: 0
                }, 4000)
            });
        });
        //尺码盒子
        //点击新建显示
        $(".xinjian").click(function() {
            $(".chimabox").css("display", "block")
        });
        //点击叉号关闭盒子
        $(".guanbi").click(function() {
            $(".chimabox").css("display", "none")
        });
        //保存
        $(".baocun").click(function() {
            var rolename = $("#rolname").val();
            var height = $("#height").val();
            if(!height || height > 250) {
                alert("请输入有效身高");
                return;
            }
            var weight = $("#weight").val();
            if(!weight || weight > 800) {
                alert("请输入有效体重");
                return;
            }
            var shoulderbreadth = $("#shoulderbreadth").val();
            if(!shoulderbreadth || shoulderbreadth > 150) {
                alert("请输入有效肩宽");
                return;
            }
            var bust = $("#bust").val();
            if(!bust || bust > 150) {
                alert("请输入有效胸围");
                return;
            }
            var waistcircumference = $("#waistcircumference").val();
            if(!waistcircumference || waistcircumference > 150) {
                alert("请输入有效腰围");
                return;
            }
            var hipcircumference = $("#hipcircumference").val();
            if(!hipcircumference || hipcircumference > 150) {
                alert("请输入有效臀围");
                return;
            }
            var footlength = $("#footlength").val();
            if(!footlength || footlength > 40) {
                alert("请输入有效脚长");
                return;
            }
            var footcircumference = $("#footcircumference").val();
            if(!footcircumference || footcircumference > 30) {
                alert("请输入有效脚围");
                return;
            }
            var moren = $(".size-check input[type='radio']").is(':checked');
            //					console.log(rolename);
            //					console.log(height);
            //					console.log(weight);
            //					console.log(shoulderbreadth);
            //					console.log(bust);
            //					console.log(waistcircumference);
            //					console.log(hipcircumference);
            //					console.log(footlength);
            //					console.log(footcircumference);
            if(moren) {
                var $tr = $('<tr><td style="width: 93px;">' + rolename + '</td><td>' + height + '</td><td>' + weight + '</td><td>' + shoulderbreadth + '</td><td>' + bust + '</td><td>' + waistcircumference + '</td><td>' + hipcircumference + '</td><td>' + footlength + '</td><td>' + footcircumference + '</td><td style="width: 60px;"><span class="tag">默认</span></td><td style="width: 105px;"><p class="editbox">修改</p><p class="delbox">删除</p></td></tr>');
                $(".size-body tbody").prepend($tr);
                $(".inputWarp input").val("");
                $("#rolname").val("我的尺码");
                $(".chimabox").css("display", "none");
                $(".size-check input[type='radio']").removeAttr('checked');
            } else {
                var $tr = $('<tr><td style="width: 93px;">' + rolename + '</td><td>' + height + '</td><td>' + weight + '</td><td>' + shoulderbreadth + '</td><td>' + bust + '</td><td>' + waistcircumference + '</td><td>' + hipcircumference + '</td><td>' + footlength + '</td><td>' + footcircumference + '</td><td style="width: 60px;"></td><td style="width: 105px;"><p class="editbox">修改</p><p class="delbox">删除</p></td></tr>');
                $(".size-body tbody").prepend($tr);
                $(".inputWarp input").val("");
                $("#rolname").val("我的尺码");
                $(".chimabox").css("display", "none")
            }

        });
        //取消
        $(".quxiao").click(function() {
            $(".inputWarp input").val("");
            $("#rolname").val("我的尺码");
            $(".chimabox").css("display", "none")
        });
        //删除尺码
        $(".size-body tbody").on("click", ".delbox", function() {
            $(this).parents("tr").remove();
        });
        //修改返还
        $(".size-body tbody").on("click", ".editbox", function() {
            var i = $(this).parent().index();
            var p1 = $(this).parents("tr").children().eq(i-10).text();
            var p2 = $(this).parents("tr").children().eq(i-9).text();
            var p3 = $(this).parents("tr").children().eq(i-8).text();
            var p4 = $(this).parents("tr").children().eq(i-7).text();
            var p5 = $(this).parents("tr").children().eq(i-6).text();
            var p6 = $(this).parents("tr").children().eq(i-5).text();
            var p7 = $(this).parents("tr").children().eq(i-4).text();
            var p8 = $(this).parents("tr").children().eq(i-3).text();
            var p9 = $(this).parents("tr").children().eq(i-2).text();
            $(".chimabox").css("display","block");
            $("#rolname").val(p1);
            $("#height").val(p2);
            $("#weight").val(p3);
            $("#shoulderbreadth").val(p4);
            $("#bust").val(p5);
            $("#waistcircumference").val(p6);
            $("#hipcircumference").val(p7);
            $("#footlength").val(p8);
            $("#footcircumference").val(p9);
            //隐藏保存按钮，显示save按钮
//					$(".baocun").css("display","none");
//					$(".save").css("display","inline-block");
            //删除原先的
            $(this).parents("tr").remove();
        });

    });
</script>
<!--	ajax-->
<script type="text/javascript">
    //ajax
    $("#addBtn").hover(function () {
        $("#add_alt").show()
    },function () {
        $("#add_alt").hide()
    })

    //修改地址的ajax请求


    // $("#").click(function () {
    //
    // })


    $(".liclass").each(function () {
        $(this).children('button').click(function () {
            // alert($(this).parent('li').parent('ul').children().length)
            var addressId = ($(this).parent('li').children('input')[0]).value
            var addressValue = ($(this).parent('li').children('input')[1]).value
            // alert(addressValue+addressId)
            //"/edit/address?addressID="+addressId + "&addressValue="+addressValue,  请求地址
            $(function(){
                //请求参数
                //
                layer.confirm('真的修改行么', function() {
                    $.ajax({
                        //请求方式
                        type: "POST",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: "/customer/addressUpdate?addressId=" + addressId + "&address=" + addressValue,
                        //请求成功
                        success: function (data) {
                            // console.log(data);
                            // alert(data.addressId)
                            // alert(data.address)
                            layer.msg("修改成功");
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        }
                    });
                });
            });
        });

        $(this).children('div').click(function () {
            var addressId = ($(this).parent('li').children('input')[0]).value
            var addressValue = ($(this).parent('li').children('input')[1]).value
            // alert(addressValue+addressId)
            //"/edit/address?addressID="+addressId + "&addressValue="+addressValue,  请求地址
            var delLi = $(this).parent()
            $(function(){
                //请求参数
                //
                layer.confirm('真的删除行么', function() {
                    $.ajax({
                        //请求方式
                        type: "POST",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: "/customer/delete_address?addressId=" + addressId,
                        //请求成功
                        success: function (data) {
                           delLi.remove()
                            layer.msg("删除成功");
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                        }
                    });
                });
            });
        });
    });



    var iii
    //新增地址的ajax请求
    $("#addBtn").click(function () {
                var customerId = $("#customerId").val();
                var newAddressValue = $("#new_address_value").val();
                //iii=$(this).parent(".wojiade");
                //alert(iii);
                //alert($(this).attr("id"));
                //alert($(this).parent().siblings(".xiongdi").find('ul').attr("class"));
                iii=$(this).parent().siblings(".xiongdi").find('ul');
                if(newAddressValue != "") {
                    $(function () {
                        //请求路径
                        //  "/add/address?customerID="+customerId + "&newAddressValue="+addressValue,
                        layer.confirm('真的添加行么', function () {
                            $.ajax({
                                //请求方式
                                type: "POST",
                                //请求的媒体类型
                                contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url: "/customer/addAddress?customerId=" + customerId + "&address=" + newAddressValue,
                                //请求成功
                                success: function (data) {
                                    console.log(data);
                                    // alert(data.customerId)
                                    // alert(data.address)
                                    layer.msg("添加成功");
                                    $("#new_address_value").val("")
                                    show(data.addressId,customerId,newAddressValue);
                                },
                                //请求失败，包含具体的错误信息
                                error: function (e) {
                                    console.log(e.status);
                                    console.log(e.responseText);
                                }
                            });
                        });
                    });
                }else {
                    layer.msg("地址为空，请重新输入");
                }
            }
        )



    function show(addressId,customerId,newAddressValue) {
        var $tr = $("<li id='"+customerId+"' class='liclass'>"+
            "<input id='edit_address_id' type='hidden' name='addressId' value='"+addressId+"' />"+
            "<input id='addressValue' class='nicheng' type='text' style='width:400px;;border-color: #8e846b;border-radius: 5px' name='address' value='"+newAddressValue+"' placeholder=' 地址 ' />"+
            "<button id='eidt_address_btn' style='margin-left: 10px;background-color:#b4a078;border: 1px solid #b4a078'  class='btn btn-primary'>修改</button>"+
            "<div style='position: absolute;display: inline'><button style='margin-left: 10px;background-color:#b4a078;border: 1px solid #b4a078' class='btn btn-primary '>删除</button></div>"+"</li>"
        );
        iii.append($tr);
        parent.location.reload()
    }
</script>
</body>

</html>